<template>
  <div class="salesman-audit">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title">
          <i class="el-icon-circle-check"></i>
          业务员审核
        </span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="loadAuditList">刷新数据</el-button>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-section">
        <el-form :model="searchForm" :inline="true" class="search-form">
          <el-form-item label="审核状态">
            <el-select v-model="searchForm.statue" placeholder="请选择状态" clearable>
              <el-option label="待审核" :value="1"></el-option>
              <el-option label="已通过" :value="2"></el-option>
              <el-option label="已拒绝" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
            <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 审核列表表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="auditList"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadAuditList"
        border
        stripe>
        <!-- 身份证号列 -->
        <template #idNo="{ row }">
          {{ maskIdNo(row.idNo) }}
        </template>

        <!-- 审核状态列 -->
        <template #statue="{ row }">
          <el-tag :type="getStatusType(row.statue)" size="small">
            {{ getStatusText(row.statue) }}
          </el-tag>
        </template>

        <!-- 业务员编号列 -->
        <template #salesmanNo="{ row }">
          <span v-if="row.salesmanNo" class="salesman-no">{{ row.salesmanNo }}</span>
          <span v-else class="no-number">-</span>
        </template>

        <!-- 操作列 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <!-- 查看详情 -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(row)">
              查看
            </el-button>

            <!-- 审核操作 -->
            <template v-if="row.statue === 1">
              <el-button
                size="mini"
                type="text"
                class="approve-btn"
                icon="el-icon-check"
                @click="handleApprove(row)">
                通过
              </el-button>
              <el-button
                size="mini"
                type="text"
                class="reject-btn"
                icon="el-icon-close"
                @click="handleReject(row)">
                拒绝
              </el-button>
            </template>

            <!-- 删除操作 -->
            <el-button
              size="mini"
              type="text"
              class="delete-btn"
              icon="el-icon-delete"
              @click="handleDelete(row)">
              删除
            </el-button>
          </div>
        </template>
      </configurable-table>
    </el-card>

    <!-- 查看详情对话框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="800px"
      :close-on-click-modal="false"
      custom-class="view-dialog"
      top="5vh"
    >
      <div slot="title" class="dialog-title-custom">
        <i class="el-icon-user-solid"></i>
        <span>业务员审核详情</span>
        <el-tag v-if="currentAudit" :type="getStatusType(currentAudit.statue)" size="small" class="status-tag">
          {{ getStatusText(currentAudit.statue) }}
        </el-tag>
      </div>

      <div class="detail-content" v-if="currentAudit">
        <!-- 基本信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <i class="el-icon-user"></i>
            <span>基本信息</span>
          </div>
          <div class="card-body">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-user"></i>
                    业务员姓名
                  </div>
                  <div class="info-value">{{ currentAudit.name }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-phone"></i>
                    联系电话
                  </div>
                  <div class="info-value">{{ currentAudit.phone }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-postcard"></i>
                    身份证号
                  </div>
                  <div class="info-value id-number">{{ maskIdNo(currentAudit.idNo) }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-location"></i>
                    所属区域
                  </div>
                  <div class="info-value">{{ currentAudit.regionId || '未指定' }}</div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-map-location"></i>
                    详细地址
                  </div>
                  <div class="info-value">{{ currentAudit.address || '未填写' }}</div>
                </div>
              </el-col>
              <el-col :span="12" v-if="currentAudit.salesmanNo">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-medal"></i>
                    业务员编号
                  </div>
                  <div class="info-value">
                    <span class="salesman-no-detail">{{ currentAudit.salesmanNo }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 身份证照片卡片 -->
        <div class="info-card" v-if="currentAudit.idCardUrl || currentAudit.idCardBackUrl">
          <div class="card-header">
            <i class="el-icon-picture-outline"></i>
            <span>身份证照片</span>
          </div>
          <div class="card-body">
            <div class="id-card-images-modern">
              <div class="image-card" v-if="currentAudit.idCardUrl">
                <div class="image-label">
                  <i class="el-icon-postcard"></i>
                  身份证正面
                </div>
                <div class="image-wrapper">
                  <el-image
                    :src="currentAudit.idCardUrl"
                    :preview-src-list="getImagePreviewList()"
                    fit="cover"
                    class="id-card-img">
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                      <span>加载失败</span>
                    </div>
                  </el-image>
                  <div class="image-overlay">
                    <i class="el-icon-zoom-in"></i>
                    点击预览
                  </div>
                </div>
              </div>
              <div class="image-card" v-if="currentAudit.idCardBackUrl">
                <div class="image-label">
                  <i class="el-icon-postcard"></i>
                  身份证背面
                </div>
                <div class="image-wrapper">
                  <el-image
                    :src="currentAudit.idCardBackUrl"
                    :preview-src-list="getImagePreviewList()"
                    fit="cover"
                    class="id-card-img">
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                      <span>加载失败</span>
                    </div>
                  </el-image>
                  <div class="image-overlay">
                    <i class="el-icon-zoom-in"></i>
                    点击预览
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 审核信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <i class="el-icon-document-checked"></i>
            <span>审核信息</span>
          </div>
          <div class="card-body">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-time"></i>
                    申请时间
                  </div>
                  <div class="info-value">{{ currentAudit.createTime }}</div>
                </div>
              </el-col>
              <el-col :span="12" v-if="currentAudit.updateTime">
                <div class="info-item">
                  <div class="info-label">
                    <i class="el-icon-timer"></i>
                    更新时间
                  </div>
                  <div class="info-value">{{ currentAudit.updateTime }}</div>
                </div>
              </el-col>
              <el-col :span="24" v-if="currentAudit.reason">
                <div class="info-item reject-reason">
                  <div class="info-label">
                    <i class="el-icon-warning"></i>
                    拒绝原因
                  </div>
                  <div class="info-value reason-text">{{ currentAudit.reason }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer-custom">
        <el-button @click="detailDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          关闭
        </el-button>
        <template v-if="currentAudit && currentAudit.statue === 1">
          <el-button
            type="success"
            size="medium"
            @click="handleApprove(currentAudit)">
            <i class="el-icon-check"></i>
            审核通过
          </el-button>
          <el-button
            type="danger"
            size="medium"
            @click="handleReject(currentAudit)">
            <i class="el-icon-close"></i>
            审核拒绝
          </el-button>
        </template>
      </div>
    </el-dialog>

    <!-- 拒绝原因对话框 -->
    <el-dialog
      :visible.sync="rejectDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      custom-class="reject-dialog"
    >
      <div slot="title" class="dialog-title-custom reject-title">
        <i class="el-icon-warning"></i>
        <span>审核拒绝</span>
      </div>

      <div class="reject-form-wrapper">
        <el-alert
          title="提示"
          type="warning"
          description="请仔细填写拒绝原因，该原因将通知给业务员。拒绝后业务员可以修改信息重新提交申请。"
          :closable="false"
          show-icon
          class="reject-alert">
        </el-alert>

        <el-form :model="rejectForm" :rules="rejectRules" ref="rejectForm" label-position="top">
          <el-form-item label="拒绝原因" prop="reason">
            <el-input
              v-model="rejectForm.reason"
              type="textarea"
              :rows="5"
              placeholder="请输入拒绝原因，例如：身份证照片不清晰、信息填写不完整等"
              maxlength="500"
              show-word-limit
              class="reject-textarea">
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer-custom">
        <el-button @click="rejectDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button
          type="danger"
          size="medium"
          @click="confirmReject"
          :loading="rejectLoading">
          <i class="el-icon-circle-check"></i>
          确定拒绝
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSalesmanAuditPage,
  checkSalesmanAudit,
  getSalesmanAuditDetail,
  deleteSalesmanAudit
} from '@/api/aggregation'

export default {
  name: 'SalesmanAudit',
  data() {
    return {
      loading: false,
      auditList: [],

      // 表格列配置
      tableColumns: [
        { prop: 'id', label: 'ID', minWidth: 80, align: 'center' },
        { prop: 'name', label: '业务员姓名', minWidth: 120, align: 'center' },
        { prop: 'phone', label: '联系电话', minWidth: 140, align: 'center' },
        { prop: 'idNo', label: '身份证号', minWidth: 180, align: 'center', slot: 'idNo' },
        { prop: 'address', label: '详细地址', minWidth: 200, align: 'center' },
        { prop: 'regionId', label: '所属区域', minWidth: 120, align: 'center' },
        { prop: 'statue', label: '审核状态', minWidth: 100, align: 'center', slot: 'statue' },
        { prop: 'salesmanNo', label: '业务员编号', minWidth: 120, align: 'center', slot: 'salesmanNo' },
        { prop: 'createTime', label: '申请时间', minWidth: 160, align: 'center' },
        { label: '操作', minWidth: 280, align: 'center', slot: 'actions' }
      ],

      // 搜索表单
      searchForm: {
        statue: null,
        name: '',
        phone: ''
      },

      // 分页
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 详情对话框
      detailDialogVisible: false,
      currentAudit: null,

      // 拒绝对话框
      rejectDialogVisible: false,
      rejectLoading: false,
      rejectForm: {
        reason: ''
      },
      rejectRules: {
        reason: [
          { required: true, message: '请输入拒绝原因', trigger: 'blur' },
          { min: 5, max: 500, message: '拒绝原因长度在 5 到 500 个字符', trigger: 'blur' }
        ]
      },
      currentRejectId: null
    }
  },
  mounted() {
    this.loadAuditList()
  },
  methods: {
    // 加载审核列表
    async loadAuditList() {
      this.loading = true
      try {
        Logger.log('=== 加载业务员审核列表 ===')

        const params = {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.size,
          ...this.searchForm
        }

        Logger.log('请求参数:', params)
        const response = await getSalesmanAuditPage(params)
        Logger.log('业务员审核列表API响应:', response)

        if (response.code === 0) {
          this.auditList = response.data.list || []
          this.pagination.total = response.data.total || 0
        } else {
          this.$message.error('加载业务员审核列表失败')
          this.auditList = []
          this.pagination.total = 0
        }
      } catch (error) {
        Logger.error('加载业务员审核列表失败:', error)
        this.$message.error('加载业务员审核列表失败')
        this.auditList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadAuditList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        statue: null,
        name: '',
        phone: ''
      }
      this.pagination.current = 1
      this.loadAuditList()
    },

    // 查看详情
    async handleView(row) {
      try {
        Logger.log('=== 查看业务员审核详情 ===')
        Logger.log('审核记录ID:', row.id)

        const response = await getSalesmanAuditDetail({id: row.id})
        Logger.log('审核详情API响应:', response)

        if (response.code === 0) {
          this.currentAudit = response.data
          this.detailDialogVisible = true
        } else {
          this.$message.error('获取审核详情失败')
        }
      } catch (error) {
        Logger.error('获取审核详情失败:', error)
        this.$message.error('获取审核详情失败')
      }
    },

    // 审核通过
    async handleApprove(row) {
      try {
        await this.$confirm('确认审核通过该业务员申请？审核通过后将自动生成业务员编号并创建账户。', '确认审核', {
          confirmButtonText: '确定通过',
          cancelButtonText: '取消',
          type: 'warning'
        })

        Logger.log('=== 审核通过 ===')
        Logger.log('审核记录ID:', row.id)

        const response = await checkSalesmanAudit({
          id: row.id,
          statue: 2
        })
        Logger.log('审核通过API响应:', response)

        if (response.code === 0) {
          this.$message.success('审核通过，已自动生成业务员编号')
          this.loadAuditList()
        } else {
          this.$message.error(response.data?.msg || '审核失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          Logger.error('审核通过失败:', error)
          this.$message.error('审核失败: ' + (error.message || '未知错误'))
        }
      }
    },

    // 审核拒绝
    handleReject(row) {
      this.currentRejectId = row.id
      this.rejectForm.reason = ''
      this.rejectDialogVisible = true
    },

    // 确认拒绝
    async confirmReject() {
      try {
        await this.$refs.rejectForm.validate()
        this.rejectLoading = true

        Logger.log('=== 审核拒绝 ===')
        Logger.log('审核记录ID:', this.currentRejectId)
        Logger.log('拒绝原因:', this.rejectForm.reason)

        const response = await checkSalesmanAudit({
          id: this.currentRejectId,
          statue: 3,
          reason: this.rejectForm.reason
        })
        Logger.log('审核拒绝API响应:', response)

        if (response.code === 0) {
          this.$message.success('审核拒绝成功')
          this.rejectDialogVisible = false
          this.loadAuditList()
        } else {
          this.$message.error(response.data?.msg || '操作失败')
        }
      } catch (error) {
        if (error !== false) { // 不是表单验证错误
          Logger.error('审核拒绝失败:', error)
          this.$message.error('操作失败: ' + (error.message || '未知错误'))
        }
      } finally {
        this.rejectLoading = false
      }
    },

    // 删除审核记录
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该审核记录？删除后无法恢复。', '确认删除', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        })

        Logger.log('=== 删除审核记录 ===')
        Logger.log('审核记录ID:', row.id)

        const response = await deleteSalesmanAudit({id: row.id})
        Logger.log('删除审核记录API响应:', response)

        if (response.code === 0) {
          this.$message.success('删除成功')
          this.loadAuditList()
        } else {
          this.$message.error(response.data?.msg || '删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          Logger.error('删除审核记录失败:', error)
          this.$message.error('删除失败: ' + (error.message || '未知错误'))
        }
      }
    },

    // 获取状态类型
    getStatusType(status) {
      const types = { 1: 'warning', 2: 'success', 3: 'danger' }
      return types[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const texts = { 1: '待审核', 2: '已通过', 3: '已拒绝' }
      return texts[status] || '未知'
    },

    // 遮罩身份证号
    maskIdNo(idNo) {
      if (!idNo) return '未填写'
      if (idNo.length < 10) return idNo
      return idNo.substring(0, 6) + '****' + idNo.substring(idNo.length - 4)
    },

    // 获取图片预览列表
    getImagePreviewList() {
      const list = []
      if (this.currentAudit?.idCardUrl) {
        list.push(this.currentAudit.idCardUrl)
      }
      if (this.currentAudit?.idCardBackUrl) {
        list.push(this.currentAudit.idCardBackUrl)
      }
      return list
    }
  }
}
</script>

<style scoped>
.salesman-audit {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.approve-btn {
  color: #67C23A !important;
}

.approve-btn:hover {
  background-color: #f0f9ff;
  color: #67C23A !important;
}

.reject-btn {
  color: #F56C6C !important;
}

.reject-btn:hover {
  background-color: #fef0f0;
  color: #F56C6C !important;
}

.delete-btn {
  color: #909399 !important;
}

.delete-btn:hover {
  background-color: #f5f7fa;
  color: #909399 !important;
}

/* 业务员编号样式 */
.salesman-no {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
  background: #f0f9ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.no-number {
  color: #c0c4cc;
  font-style: italic;
}


/* 详情对话框样式 */
.detail-content {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 8px;
}

/* 自定义滚动条 */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.detail-content::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

/* 对话框标题 */
.dialog-title-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  padding-right: 40px; /* 为关闭按钮留出空间 */
}

.dialog-title-custom i {
  font-size: 20px;
  color: #409eff;
}

.dialog-title-custom .status-tag {
  margin-left: 8px;
  flex-shrink: 0; /* 防止标签被压缩 */
}

/* 信息卡片 */
.info-card {
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.info-card:last-child {
  margin-bottom: 0;
}

.card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.card-header i {
  font-size: 16px;
  color: #409eff;
}

.card-body {
  padding: 20px;
}

/* 信息项 */
.info-item {
  margin-bottom: 20px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
}

.info-label i {
  font-size: 14px;
  color: #c0c4cc;
}

.info-value {
  font-size: 14px;
  color: #303133;
  padding-left: 20px;
  line-height: 1.6;
  word-break: break-all;
}

.id-number {
  font-family: 'Courier New', monospace;
  font-weight: 500;
  color: #606266;
  background: #f5f7fa;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
}

.salesman-no-detail {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
  background: linear-gradient(135deg, #e6f7ff 0%, #d9f0ff 100%);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  display: inline-block;
  border: 1px solid #91d5ff;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
}

/* 拒绝原因特殊样式 */
.reject-reason .info-value {
  background: #fef0f0;
  border-left: 3px solid #f56c6c;
  padding: 12px 16px;
  border-radius: 4px;
  color: #606266;
}

.reason-text {
  font-size: 13px;
  line-height: 1.8;
}

/* 身份证照片现代化样式 */
.id-card-images-modern {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.image-card {
  flex: 1;
  min-width: 280px;
  max-width: 320px;
}

.image-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  margin-bottom: 12px;
  padding-left: 4px;
}

.image-label i {
  color: #409eff;
}

.image-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.image-wrapper:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.image-wrapper:hover .image-overlay {
  opacity: 1;
}

.id-card-img {
  width: 100%;
  height: 180px;
  display: block;
  background: #f5f7fa;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s ease;
}

.image-overlay i {
  font-size: 28px;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c0c4cc;
  font-size: 14px;
  height: 100%;
}

.image-error i {
  font-size: 32px;
}

/* 对话框底部 */
.dialog-footer-custom {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
}

.dialog-footer-custom .el-button {
  min-width: 100px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dialog-footer-custom .el-button i {
  margin-right: 4px;
}

/* 卡片头部样式 */
.el-card__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
}

.el-card__header .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 拒绝对话框样式 */
.reject-title i {
  color: #f56c6c;
}

.reject-form-wrapper {
  padding: 0 8px;
}

.reject-alert {
  margin-bottom: 20px;
  border-radius: 6px;
}

.reject-textarea {
  border-radius: 6px;
}

.reject-textarea >>> .el-textarea__inner {
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}

.reject-textarea >>> .el-textarea__inner:focus {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.1);
}

/* 对话框样式已移至公共样式 dialog.scss */
/* reject-dialog 为特殊用途对话框，如需特殊样式可在此处添加 */
</style>
